<template>
  <div class="table_container">
    <el-descriptions title="个人信息" :column="5">
      <template slot="extra">
        <el-button type="primary" plain icon="el-icon-edit" @click="handleEditUser">修改</el-button>
      </template>
      <el-descriptions-item label="姓名">{{ form.name }}</el-descriptions-item>
      <el-descriptions-item label="生日">{{ form.birth }}</el-descriptions-item>
      <el-descriptions-item label="手机">{{ form.phone }}</el-descriptions-item>
      <el-descriptions-item label="身份证">{{ form.id_card }}</el-descriptions-item>
    </el-descriptions>
    <el-divider></el-divider>
    <el-descriptions title="档案信息">
      <template slot="extra">
        <el-button type="primary" plain icon="el-icon-edit" v-show="reportDisable" @click="handleEditReport">修改</el-button>
        <el-button plain v-show="!reportDisable" @click="reportDisable=true">取消</el-button>
        <el-button type="primary" v-show="!reportDisable" @click="onSubmit('reportForm')">保存</el-button>
      </template>
    </el-descriptions>
    <el-form :disabled="reportDisable" :model="formData" label-width="120px" style="text-align: left;">
      <el-tabs v-model="activeName">
        <el-tab-pane label="全部" name="1">
          <el-col :span="24">
            <span>检查类型:</span>
          </el-col>
          <el-col :span="24">
            <el-form-item label="检查类型">
              <el-radio-group v-model="formData.report_type">
                <el-radio :label="0">初筛</el-radio>
                <el-radio :label="1">复测</el-radio>
                <el-radio :label="2">复查</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-divider></el-divider>
            <span>裸眼视力:</span>
          </el-col>
          <el-col :span="10">
            <el-form-item label="左_裸眼视力" prop="">
              <el-input v-model="formData.OS_VASC" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="右_裸眼视力" prop="">
              <el-input v-model="formData.OD_VASC" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-divider></el-divider>
            <span>主观判断:</span>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否近视">
              <el-switch v-model="formData.is_myopia"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-divider></el-divider>
            <span>戴镜类型:</span>
          </el-col>
          <el-col :span="24">
            <el-form-item label="配镜类型">
              <el-radio-group v-model="formData.glasses_type">
                <el-radio :label="0">未配镜</el-radio>
                <el-radio :label="1">框架镜</el-radio>
                <el-radio :label="2">角膜塑形镜</el-radio>
                <el-radio :label="3">其他塑形镜</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-divider></el-divider>
            <span>矫正视力:</span>
          </el-col>
          <el-col :span="10">
            <el-form-item label="左_戴镜视力" prop="">
              <el-input v-model="formData.OS_VACC" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="右_戴镜视力" prop="">
              <el-input v-model="formData.OD_VACC" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="20">
            <el-divider></el-divider>
            <span>验光仪:</span>
          </el-col>
          <el-col :span="10">
            <el-form-item label="左_球镜" prop="">
              <el-input v-model="formData.OS_Sph" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="右_球镜" prop="">
              <el-input v-model="formData.OD_Sph" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="左_柱镜" prop="">
              <el-input v-model="formData.OS_Cyl" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="右_柱镜" prop="">
              <el-input v-model="formData.OD_Cyl" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="左_轴位" prop="">
              <el-input v-model="formData.OS_Axis" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="右_轴位" prop="">
              <el-input v-model="formData.OD_Axis" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-divider></el-divider>
            <span>屈光备注:</span>
          </el-col>
          <el-col :span="20">
            <el-form-item label="备注" prop="desc">
              <el-input type="textarea" v-model="formData.desc"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-divider></el-divider>
            <span>眼轴AL:</span>
          </el-col>
          <el-col :span="10">
            <el-form-item label="左_眼轴" prop="">
              <el-input v-model="formData.OS_AL" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="右_眼轴" prop="">
              <el-input v-model="formData.OD_AL" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-divider></el-divider>
            <span>眼压:</span>
          </el-col>
          <el-col :span="10">
            <el-form-item label="左_眼压" prop="">
              <el-input v-model="formData.OS_IOP" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="右_眼压" prop="">
              <el-input v-model="formData.OD_IOP" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-divider></el-divider>
            <span>结论建议:</span>
          </el-col>
          <el-col :span="20">
            <el-form-item label="筛查结论">
              <el-input type="textarea" v-model="formData.conclusion"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="处理建议">
              <el-input type="textarea" v-model="formData.suggest"></el-input>
            </el-form-item>
          </el-col>
        </el-tab-pane>
        <el-tab-pane label="视力检测" name="2">
          <el-col :span="24">
            <span>裸眼视力:</span>
          </el-col>
          <el-col :span="10">
            <el-form-item label="左_裸眼视力" prop="">
              <el-input v-model="formData.OS_VASC" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="右_裸眼视力" prop="">
              <el-input v-model="formData.OD_VASC" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-divider></el-divider>
            <span>主观判断:</span>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否近视">
              <el-switch v-model="formData.is_myopia"></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-divider></el-divider>
            <span>戴镜类型:</span>
          </el-col>
          <el-col :span="24">
            <el-form-item label="配镜类型">
              <el-radio-group v-model="formData.glasses_type">
                <el-radio :label="0">未配镜</el-radio>
                <el-radio :label="1">框架镜</el-radio>
                <el-radio :label="2">角膜塑形镜</el-radio>
                <el-radio :label="3">其他塑形镜</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

          <el-col :span="24">
            <el-divider></el-divider>
            <span>矫正视力:</span>
          </el-col>
          <el-col :span="11">
            <el-form-item label="左_戴镜视力" prop="">
              <el-input v-model="formData.OS_VACC" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="右_戴镜视力" prop="">
              <el-input v-model="formData.OD_VACC" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
        </el-tab-pane>
        <el-tab-pane label="屈光检测" name="3">
          <el-col :span="24">
            <span>验光仪:</span>
          </el-col>
          <el-col :span="10">
            <el-form-item label="左_球镜" prop="">
              <el-input v-model="formData.OS_Sph" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="右_球镜" prop="">
              <el-input v-model="formData.OD_Sph" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="左_柱镜" prop="">
              <el-input v-model="formData.OS_Cyl" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="右_柱镜" prop="">
              <el-input v-model="formData.OD_Cyl" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="左_轴位" prop="">
              <el-input v-model="formData.OS_Axis" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="右_轴位" prop="">
              <el-input v-model="formData.OD_Axis" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-divider></el-divider>
            <span>屈光备注:</span>
          </el-col>
          <el-col :span="20">
            <el-form-item label="备注" prop="desc">
              <el-input type="textarea" v-model="formData.desc"></el-input>
            </el-form-item>
          </el-col>
        </el-tab-pane>
        <el-tab-pane label="其他" name="4">
          <el-col :span="24">
            <span>眼压:</span>
          </el-col>
          <el-col :span="10">
            <el-form-item label="左_眼压" prop="">
              <el-input v-model="formData.OS_IOP" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="右_眼压" prop="">
              <el-input v-model="formData.OD_IOP" class="custorm_input"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-divider></el-divider>
            <span>结论建议:</span>
          </el-col>
          <el-col :span="20">
            <el-form-item label="筛查结论">
              <el-input type="textarea" v-model="formData.conclusion"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="处理建议">
              <el-input type="textarea" v-model="formData.suggest"></el-input>
            </el-form-item>
          </el-col>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <el-dialog title="新建患者"  width="400px" @close="handleClose" :visible.sync="createDialogFormVisible" >
      <el-form :model="form" style="text-align: left" label-width="80px" :rules="rulesUser">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="身份证号" prop="id_card">
          <el-input v-model="form.id_card"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.gender">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model.number="form.phone"></el-input>
        </el-form-item>

        <el-form-item label="生日">
          <el-date-picker
              style="width: 100%"
              v-model="form.birth"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="父母姓名">
          <el-input v-model="form.parent_name"></el-input>
        </el-form-item>
        <el-form-item label="父母电话">
          <el-input v-model.number="form.parent_phone"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="form.status">
            <el-radio :label="true">启用</el-radio>
            <el-radio :label="false">停用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitCreatePatient">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {createPatient, getPatientById, getReportById, updatePatient, updateReport} from "@/api";

export default {
  name: "detail",
  data() {
    return {
      activeName: '1',
      formData: {},
      form: {},
      reportDisable: true,
      createDialogFormVisible: false,
      // 表单校验
      rulesUser: {
        name: [
          {required: true, message: '姓名不能为空', trigger: 'blur'}
        ],
        id_card: [
          {required: true, message: '身份证号不能为空', trigger: 'blur'},
          {validator: this.validID, trigger: 'blur'}
        ]
      },
    }
  },
  mounted() {
    console.log(this.$route.params.id)
    this.getData(this.$route.params.id)
  },
  methods: {
    getData(params) {
      getReportById(params).then(res => {
        this.formData = res.data
        getPatientById(res.data.patient).then(res => {
          this.form = res.data
        })
      })
    },
    handleClose() {

    },
    handleEditUser() {
      this.createDialogFormVisible = true
    },
    handleEditReport() {
      this.reportDisable = false
    },
    onSubmit(formName) {
      let data = this.formData
      updateReport(data).then(response => {
        this.$message.success('修改成功');
        this.reportDisable = true
        this.formData = response.data
      })
    },
    // 身份证验证
    async validID(rule, value, callback) {
      // 身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
      let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      if (reg.test(value)) {
        await this.go(value.length);
        callback()
      } else {
        callback(new Error('身份证号码不正确'))
      }
    },
    // 实现自动生成生日，性别，年龄
    go(val) {
      let iden = this.form.id_card;
      let sex = null;
      let birth = null;
      let myDate = new Date();
      let month = myDate.getMonth() + 1;
      let day = myDate.getDate();
      let age = 0;

      if (val === 18) {
        age = myDate.getFullYear() - iden.substring(6, 10) - 1;
        sex = iden.substring(16, 17);
        birth = iden.substring(6, 10) + "-" + iden.substring(10, 12) + "-" + iden.substring(12, 14);
        if (iden.substring(10, 12) < month || iden.substring(10, 12) === month && iden.substring(12, 14) <= day) age++;

      }
      if (val === 15) {
        age = myDate.getFullYear() - iden.substring(6, 8) - 1901;
        sex = iden.substring(13, 14);
        birth = "19" + iden.substring(6, 8) + "-" + iden.substring(8, 10) + "-" + iden.substring(10, 12);
        if (iden.substring(8, 10) < month || iden.substring(8, 10) === month && iden.substring(10, 12) <= day) age++;
      }

      if (sex % 2 === 0)
        sex = 2;
      else
        sex = 1;
      //性别  ==> 1:男       2:女
      this.form.age = age;
      this.form.gender = sex;
      this.form.birth = birth;
    },

    submitCreatePatient() {
      let data = this.form
      updatePatient(data).then(res => {
        this.$message.success('修改成功！')
        this.createDialogFormVisible = false
        this.form = res.data
      })
    },


  }
}
</script>

<style scoped>
.table_container {
  background-color: white;
  margin: 5px;
  padding: 50px;
}
</style>